import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
import ReactDOM from 'react-dom';

/* 
  useEffect(回调函数)  组件初次加载和更新的是 都会执行； 相当于 didMount和didUpted的结合体
  useEffect(回调函数,[])相当于 didMount
  useEffect(回调函数,[a,b,c])相当于 didMount + (a,b,c任意一个放生改变的时候执行)

  useMemo 可以用来缓存 对象
  useCallback 可以用来缓存函数
  memo + useMemo + useCallback  可以减少子组建的渲染次数 
*/
function Count(props) {
  console.log('count render')
  return <>
    <h1>{props.count.n}</h1>
  </>
}
Count = memo(Count)

function App() {
  let [count, setCount] = useState(100)
  let [count2, setCount2] = useState(1)
  useEffect(() => {
    console.log(666)
    return () => {
      // 这个回调函数 将会在下一次666函数执行的时候触发 或者组件销毁的时候触发
      console.log("组件销毁了")
    }
  }, [])
  // let obj = {
  //   n: count
  // }
  let f = () => {
    console.log(66)
  }
  let obj = useMemo(() => {
    return {
      n: count
    }
  }, [count])


  f = useCallback(f, []) // f 永远对应的是第一次创建的那个函数体地址
  return <>
    <Count count={obj} onXXX={f} />
    <button onClick={() => setCount(count + 10)}>+</button>

    <h2>{count2}</h2>
    <button onClick={() => setCount2(count2 + 1)}>+2</button>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))